<template>
  <SingleRootElement
    :name="obj.name"
    :age="obj.age"
    :gender="obj.gender"
    :love="obj.love"
    :like="obj.like"
  ></SingleRootElement>
  <SingleRootElement v-bind="obj"></SingleRootElement>
  <MultiRootElement a="a" b="b" c="c"></MultiRootElement>

  <div>{{ count }}</div>
  <Counter @increase="increase" @decrease="decrease" @addNum="addNum"></Counter>

  <TabControl :tabs="tabs" @choose="choose"></TabControl>
  <div>{{ content[currentIndex] }}</div>
</template>

<script>
import SingleRootElement from './SingleRootElement.vue'
import MultiRootElement from './MultiRootElement.vue'
import Counter from './Counter.vue'
import TabControl from './TabControl.vue'
export default {
  components: { SingleRootElement, MultiRootElement, Counter, TabControl },
  data() {
    return {
      obj: {
        name: 'slim',
        age: 18,
        gender: 'male',
        love: 'coding',
        like: ['coding', 'writing']
      },
      count: 0,
      tabs: ['图书', '衣服', '手机'],
      content: ['好多书', '好多衣服', '好多手机'],
      currentIndex: 0
    }
  },
  methods: {
    increase() {
      this.count++
    },
    decrease() {
      this.count--
    },
    addNum(num) {
      this.count += num
    },
    choose(index){
      this.currentIndex = index
    }
  }
}
</script>

<style scoped></style>
